<!DOCTYPE>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
</head>
<style>
    a:hover{
        color:red;
        cursor:pointer;
    }
</style>
<body>
<div id="box" style="display: flex;">
<div class="imgleft" ><img style="width:100%;" src="/images/front/fuleft.jpg"></div>
<div id="mainiBox" style="width:905px;">
     <div id="top">
         <div id="toplogin"></div>
         <div id="topleft">
             <form action="" method="post">
                 <div id="suo">
                     <div class="topl">
                         <input type="text" name="content" />
                     </div>
                     <div class="topr">
                         <a class="layui-icon layui-icon-search"></a>
                         <input type="submit" value="搜索">
                     </div>
                 </div>
             </form>
         </div>
         <div id="topright">
             <p><a style="padding-left:13px;"><i class="layui-icon layui-icon-cart" ></i>我的购物车</a></p>
         </div>
     </div>

    <div id="center">
        <div style="width: 200px;height:400px; border:1px solid red;">
            <div style="display: flex; align-items: center;" th:each="t:${types}">
                <div style="margin:5px;" th:text="${t.getTypeName()}"></div>
                <div style="display: flex;flex-wrap: wrap;">
                    <a style="margin: 8px;" th:text="${t.getDeailType()}"></a>
                    <a style="margin: 8px;" th:text="${t.getDeailTypen()}"></a>
                    <a style="margin: 8px;" th:text="${t.getDeailTypef()}"></a>
                </div>
            </div>
        </div>

        <div style="width:700px;">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <img src="/images/front/q.jpg">
                    <img src="/images/front/a.jpg">
                    <img src="/images/front/b.jpg">
                    <img src="/images/front/c.jpg">
                </div>
            </div>
        </div>
    </div>

    <div id="miaosha">
        <h2 style="text-align: center; font-style: italic;color:red;font-weight:bold;">秒杀价</h2>

            <div class="kuai" th:each="list:${list1}" style="
            width:178px; height:210px; border: 1px solid red; float: left;">
                <a th:href="@{/shop(id=${list.getGoodsId()})}"><img th:src="${list.getImg()}"
                     style="width: 130px; height: 120px; padding: 10px 25px;"/>
                <p style="width:100%;overflow: hidden;white-space: nowrap;
	            text-overflow: ellipsis; height:21px;font-size:15px;text-align: center;font-weight: bolder;">
                    <a th:href="@{/shop(id=${list.getGoodsId()})}" th:text="${list.getTitle()}"></a></p>
                <p style="width:100%;background-color: red;line-height:20px;
                font-style:italic; font-weight:bold;color:white; height:20px;font-size:18px;text-align: center;">
                    ¥<span th:text="${list.getOldPrice()}"></span></p>
                <p style="
                text-decoration: line-through;width:100%;color:#a6aebf; height:21px;font-size:14px;text-align: center;">
                    ¥<span th:text="${list.getPrice()}"></span></p></a>
        </div>
    </div>


</div>
<div class="imgleft"><img style="width:80%;" src="/images/front/furight.jpg"></div>
</div>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;

        //建造实例
        carousel.render({
            elem: '#test1'
            ,anim: 'fade'
            ,width: '100%' //设置容器宽度
            ,arrow: 'hover' //始终显示箭头
            ,trigger: 'hover'
            ,height:'402px'
        });
    });
</script>
</body>
</html>